<!--
- Author:   .
- Date:    2018/1/19 0019.
- File:    list.
-->
<template>
  <div class="Web_Box">
    <div class="BankCard">
      <ul>
        <li v-for="(bankcard, index) in bankcardList.data" @click="selectBankcard(bankcard.mb_id)">
          <div class="lefticon"><i class="iconfont icon-zhaoshan"></i></div>
          <div class="con" style="margin-bottom: 5px">
            <p><span class="f28 fb">{{bankcard.bank_name}}</span><span class="ml40 f24">{{bankcard.account_name}}</span>
            </p>
            <p class="f24">{{bankcard.member_bank_num}}</p>
          </div>
          <div class="detail_sel f-cb  cr_999" v-show="from != 'account-withdraw'">
            <div class="fl select_b cr_45a73a" v-show="bankcard.is_default == '1'">
              <i class="iconfont icon-pitchon2 "></i> <span class="pl5">默认银行卡</span>
            </div>
            <div class="fl select_b" v-show="!bankcard.is_default || bankcard.is_default == '0'" @click="setDefaultBankcard(bankcard.mb_id)">
              <i class="iconfont icon-pitch2"></i>
              <span class="pl5">设为默认</span>
            </div>
            <div class="fr detail_icon">
              <span @click="gotoBankcardEdit(bankcard.mb_id)"><i class="iconfont icon-edit2"></i> <span class="pr30 pl5">编辑</span></span>
              <span @click="delBankcard(bankcard.mb_id, index)" class="delete"><i class="iconfont icon-del2 pr5"></i> <span>删除</span></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="BottomGd">
      <router-link :to="{name: 'bankcard-edit'}" class="but_2 wauto disb tc">+添加银行卡</router-link>
    </div>
    <empty-data :show="bankcardList.requested && bankcardList.data.length <= 0"></empty-data>
    <back-nav></back-nav>
  </div>

</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({bankcardList: 'bankcardList'}),
      mapRules({need: ['bankcardList']})
    ],
    data() {
      return {
        from: this.$route.query.from || ''
      }
    },
    components: {},
    created() {
    },
    methods: {
      gotoBankcardEdit(bankcardId) {
        this.$router.push({name: 'bankcard-edit', query: {bankcard: bankcardId}})
      },
      gotoGoodsDetail(id) {
        this.$router.push({name: 'goods-detail', params: {id: id}})
      },
      selectBankcard(id) {
        if (this.from !== 'account-withdraw') {  // 提现跳进该页面时,可选择银行卡, 其他页跳进来点击无操作
          return
        }
        this.$router.replace({
          name: 'account-withdraw',
          query: {bankcard: id, type: this.$route.query.type}
        })
      },
      setDefaultBankcard(id) {
        this.$request.setDefaultBankcard(id).then(data => {
          for (let i = 0; i < this.bankcardList.data.length; i++) {
            if (this.bankcardList.data[i].mb_id === id) {
              this.bankcardList.data[i].is_default = '1'
            } else {
              this.bankcardList.data[i].is_default = '0'
            }
          }
          this.$toast('设置成功')
        }).catch(e => {
          console.error('设置为默认银行卡失败', e)
        })
      },
      getBankcardList(page, pageSize) {
        this.bankcardList.loading = true
        this.$request.getBankcardList(page, pageSize).then(data => {
          if (data.length < this.bankcardList.pageSize) {
            this.bankcardList.allLoaded = true
          }
          this.bankcardList.data = [...this.bankcardList.data, ...data]
        }).finally(() => {
          this.bankcardList.requested = true
          this.bankcardList.loading = false
        })
      },
      delBankcard(bankcardId, index) {
        this.$messageBox.confirm(`你确定要删除吗?`).then(action => {
          this.$request.delBankcard(bankcardId).then(data => {
            this.bankcardList.data.splice(index, 1)
            this.$toast('删除成功')
          }).catch(e => {
            console.error('删除银行卡失败', e)
          })
        }).catch(() => {
        })
      },
      loadMore() {
        if (this.bankcardList.loading || this.bankcardList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getBankcardList(++this.bankcardList.page, this.bankcardList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>